<template>
    <div class="table">
        <div class="crumbs orderTitle">
            <h1 class="orderH1">会员</h1>
        </div>

        <div class="container">
            <el-container>
                <el-aside width="300px" class="user_info_box">
                    <el-row class="user_title">
                        <el-col class="user_img_box">
                            <div class="user_img">
                                <img :src="imgUrl" height="100%"/>
                            </div>
                        </el-col>
                        <el-col class="user_base_info user_font_lineHeight user_fontSize">
                            <p>{{userInfo.name}}</p>
                            <p>{{mobileNumber}}</p>
                        </el-col>
                        <el-col class="user_block">

                        </el-col>
                    </el-row>
                    <el-row class="user_title user_pd_top user_font_lineHeight">
                        <el-col class="user_block">
                            ￥{{userInfo.countConsume}}
                            <p>累计消费</p>

                        </el-col>
                        <el-col class="user_block">
                            {{userInfo.countArrive}}次
                            <p>累计到店</p>
                        </el-col>
                    </el-row>
                    <el-row class="user_list">
                        <el-col class="user_list_cell user_font_lineHeight_high">
                            <p class="user_block user_font_left">上次登录时间：</p>
                            <p class="user_block user_font_right">{{lastTime}}</p>
                        </el-col>
                        <el-col class="user_list_cell user_font_lineHeight_high">
                            <p class="user_block user_font_left">推荐人：</p>
                            <p class="user_block user_font_right">{{userInfo.registerSource}}</p>
                        </el-col>
                        <el-col class="user_list_cell user_font_lineHeight_high">
                            <p class="user_block user_font_left">来源：</p>
                            <p class="user_block user_font_right">{{userInfo.userSourceType}}</p>
                        </el-col>
                    </el-row>

                </el-aside>
                <el-container>
                    <el-container>
                        <el-header>
                            <el-row class="selectStore">
                                <el-col :span="12"><div class="grid-content bg-purple">客情维护</div></el-col>
                                <el-col :span="12"><div class="grid-content bg-purple-light text_right"><el-button type="primary" @click="addSituation">添加客情</el-button></div></el-col>
                            </el-row>
                        </el-header>
                        <el-main v-for="item in userSituation" :key="item.id" class="row_box">
                            <div  class="row_left">
                                <el-row class="row_left_style situation_left_box">
                                    <el-col><div class="grid-content bg-purple situation_left_name">{{item.creatorName}}</div></el-col>
                                    <el-col><div class="grid-content bg-purple-light">{{item.generateTime}}</div></el-col>
                                </el-row>
                            </div>
                            <div class="row_right">
                                <el-row class="row_right_style">
                                    <el-col><div class="grid-content bg-purple-light">{{item.content}}</div></el-col>
                                    <el-row class="situation_img_box">
                                        <img :src="baseImgUrl + item.imgOne" v-if="item.imgOne" class="situationImg"/>
                                        <img :src="baseImgUrl + item.imgTwo" v-if="item.imgTwo" class="situationImg"/>
                                        <img :src="baseImgUrl + item.imgThree" v-if="item.imgThree" class="situationImg"/>
                                    </el-row>
                                </el-row>
                            </div>

                        </el-main>
                        <el-footer>
                            <div class="pagination">
                                <el-pagination
                                    @current-change="handleCurrentChange"
                                    @size-change="handleSizeChange"
                                    layout="total, prev, pager, next"
                                    :total="pageNum"
                                    :page-size="pageSize"
                                    :current-page="cur_page">
                                </el-pagination>
                            </div>
                        </el-footer>
                    </el-container>


                </el-container>
            </el-container>
        </div>
        <el-dialog
            title="添加客情"
            :visible.sync="userSituationFlag"
            width="500px">
            <div>
                <el-form label-width="120px">
                    <el-form-item label="客情描述：">
                        <el-input type="textarea" v-model="infoDescribe"></el-input>
                    </el-form-item>
                    <el-form-item label="上传图片：">
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            action=""
                            :on-change="onUploadChange"
                            :file-list="fileList"
                            list-type="picture"
                            :auto-upload="false"
                            :limit=3>
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="userSituationFlag = false" >取 消</el-button>
                <el-button type="primary" @click="determine()">确 定</el-button>
        </span>
        </el-dialog>
    </div>



</template>

<script>
    import Vue from 'vue';
    import {
        storeAsGet,
        storeAsPost,
        storeAsPut,
        attachments
    } from '../api/api';
    import {base64,formatDate} from '../tool/tool'
    export default {
        data() {
            return {
                userSituationFlag:false,
                userInfo:{},
                userSituation:[],
                baseImgUrl:this.$ajaxBase + '/attachments/download?id=',
                imgUrl:'',
                mobileNumber:'',
                cur_page: 0,
                pageSize: 5,
                pageNum: null,
                infoDescribe:'',
                fileList:[],
                fileIdList:[],
                lastTime:'',
                phoneNumber:this.$route.query.id

            }
        },
        updated(){
            console.log(1)

        },
        watch:{
            '$route.query.id' (oldVal,newVal) {
                console.log(oldVal,newVal)
                this.getMember(newVal)
            }
        },
        created() {
            this.getMember(this.$route.query.id);
            console.log(1)
        },
        computed: {},
        methods: {
            getMember:function(e){
                let that = this;
                let fn = res => {
                    that.userInfo = res.data.content.user;
                    that.imgUrl = that.$ajaxBase + '/attachments/download?id=' + that.userInfo.avatar;
                    that.lastTime = formatDate(new Date(that.userInfo.lastLoginTime), 'yyyy-MM-dd hh:mm:ss')
                    console.log(res,that.userInfo,that.imgUrl,11111)
                    storeAsGet('/users/mobile/complete?id='+ that.userInfo.id ).then(res=>{
                        that.mobileNumber = res.data.content.completeMobile.substr(0, 3) + '****' + res.data.content.completeMobile.substr(7);


                        console.log(res,111)
                    });
                    that.getSituation(that.cur_page)
                };
                if(e.length <= 11){
                    storeAsGet('/users/mobile?mobileNumber='+ e ).then(res=>{
                        fn(res)
                    });
                }else{
                    storeAsGet('/users/userId?userId='+ e ).then(res=>{
                        fn(res)
                    })
                }


            },
            getSituation:function(cur_page){
                let that = this;
                storeAsGet('/userSituation/user/page?userId='+that.userInfo.id+'&page='+cur_page+'&size='+that.pageSize+'&direction=DESC&propertys=createdTime').then(res=>{
                    that.pageNum = res.data.content.page.totalElements;
                    that.userSituation = res.data.content.page.content;
                    that.userSituation.forEach(function(value){
                        value.generateTime = formatDate(new Date(value.generateTime), 'yyyy-MM-dd hh:mm:ss')
                    });

                    console.log(that.userSituation)
                })
            },
            handleCurrentChange(val) {
                console.log(val)
                this.cur_page = val;
                this.getSituation(val-1)
            },
            handleSizeChange(val){
                console.log(val,111111)
            },
            onUploadChange(file) {//上传图片事件
                let that = this;
                let base64Url = base64(file.url);

                base64Url.then(function(url){
                    let str = url.split(',');
                    console.log(str[1]);
                    attachments(str[1]).then(res =>{
                        that.fileIdList.push(res.data.content.imgId);
                    })
                })
            },
            determine(){
                let that = this;
                console.log(this.infoDescribe)
                console.log(this.fileIdList)

                storeAsPost({
                    content: this.infoDescribe,
                    imgOne: this.fileIdList[0],
                    imgTwo: this.fileIdList[1],
                    imgThree: this.fileIdList[2]
                },'/userSituation/detail?userId='+this.userInfo.id).then(function(res){
                    that.getSituation(that.cur_page)
                });
                this.userSituationFlag = false
            },
            addSituation(){
                this.fileIdList = [];
                this.userSituationFlag = true
            }
        }


    }

</script>

<style scoped>
    .orderH1{
        font-size: 20px;
        color: #666;
        display: inline-block;
    }
    .orderTitle{
        margin-bottom: 20px;
    }
    .selectStore{
        padding-bottom: 20px;
        border-bottom:#eee 1px solid
    }
    .ticketBox{
        position: absolute;
        left: 50%;
        border: #ddd 1px solid;
        border-radius: 10px;
        width: 400px;
        margin: 15px 0 0 -210px;
        padding: 15px 20px;
        background: linear-gradient(-135deg, transparent 65px, #fefefe 0), linear-gradient(135deg, transparent 65px, #46a716 0);
    }
    .ticketBox  h1{
        text-align: center;
        font-size: 24px;
    }
    .ticketBox  h2{
        text-align: center;
        line-height: 60px;
        color: #999;

    }
    .ticketBox  p{
        text-align: center;
        margin-bottom: 60px;
    }
    .ticketBox .statusBox i{
        position: absolute;
        width: 70px;
        right: -9px;
        top: 23px;
        transform: rotate(45deg);
        color: #fff;
    }
    .ticketBox button{
        width: 100%;
        height: 40px;
        border-radius: 0 0 10px 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        font-size: 14px;
    }
   .text_right{
       text-align: right;
   }
    .situationImg{
        width: 80px;
        height: 80px;
    }
    .row_box{
        display: flex;
    }
    .row_left{
        width: 100px;
        padding-right: 30px;
    }
    .row_right{
        flex: 3;
    }
    .situation_left_box{
        font-size: 14px;
        text-align: center;
        background: #eee;
        border-radius: 10px;
        padding: 10px 0;
    }
    .situation_left_name{
        margin-bottom: 10px;
        font-size: 15px;
        font-weight: bold;
    }
    .bg-purple-light{
        line-height: 30px;
    }
    .situation_img_box img{ margin-right: 5px; border: 1px solid #eee}
    .situation_img_box{
        float: left;
        width: 100%;
        padding-top: 10px;
        border-top: 1px dashed #ddd;
        margin-top: 10px;
    }
    .row_right_style{
        position: relative;
        background: #f9f9f9;
        border-radius: 5px;
        padding:20px;

    }
    .row_right_style:before{
             position: absolute;
             content: "";
             width: 0;
             height: 0;
             right: 100%;
             top: 18px;
             border-top: 10px solid transparent;
             border-right: 20px solid #f9f9f9;
             border-bottom: 10px solid transparent;
     }
    .user_info_box{
        padding: 20px;
        width:160px;
        border: 1px solid #eee;
        text-align: center;
        font-size: 13px;
    }
    .user_title{
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        display: flex;
    }
    .user_img_box{
        flex: 1;
    }
    .user_img{
        border-radius: 100%;
        width: 60px;
        height: 60px;
        overflow: hidden;
        text-align: center;
    }
    .user_base_info{
        flex: 2;
    }
    .user_block{
        flex: 1;
    }
    .user_list_cell{
        border-bottom: 1px solid #eee;
        display: flex;
    }

    .user_font_lineHeight{
        line-height: 30px;
    }
    .user_font_lineHeight_high{
        line-height: 40px;
    }
    .user_font_left{
        text-align: left;
    }
    .user_font_right{
        text-align: right;
    }
    .user_pd_top{
        padding-top: 10px;
    }
    .user_fontSize{
        font-size: 15px;
    }
</style>
